<template>
	<view class="a">
		<button type="default" @click="changeLoad('more')">上拉显示更多（more）</button>
		<button type="default" @click="changeLoad('noMore')">没有更多数据（noMore）</button>
		<button type="default" @click="changeLoad('loading')">正在加载（loading）</button>
		<view style="height: 800rpx;">
			<view class="uni-title uni-common-mt">
				Vertical Scroll
				<text>\n纵向滚动</text>
			</view>
			<view class="a">
				<scroll-view
					:scroll-top="scrollTop"
					scroll-y="true"
					scroll-x="true"
					class="a"
					@refresherpulling="refresherpulling"
					@scrolltoupper="upper"
					@scrolltolower="lower"
					@scroll="scroll"
				>
					<view id="demo3" class="scroll-view-item_H uni-bg-blue" v-for="(item,index) in 40" key="index">{{ item }}A</view>
				</scroll-view>
			</view>
			<!-- <view @tap="goTop" class="uni-link uni-center uni-common-mt">
	                点击这里返回顶部
	            </view>
	            <view class="uni-title uni-common-mt">
	                Horizontal Scroll
	                <text>\n横向滚动</text>
	            </view>
	            <view>
	                <scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
	                    <view id="demo3" class="scroll-view-item_H uni-bg-blue" v-for="item in 20">{{item}}B</view>
	                </scroll-view>
	            </view> -->
			<uni-load-more :status="loadingType"></uni-load-more>
		</view>
	</view>
</template>

<script>
import loadMore from '../../components/uni-load-more/uni-load-more.vue';
export default {
	components: {
		loadMore
	},
	data() {
		return {
			scrollTop: 0,
			old: {
				scrollTop: 0
			},
			loadingType: 'more',//more（上拉显示更多）
		};
	},
	methods: {
		changeLoad(type){
			this.loadingType=type
		},
		refresherpulling(e) {
		},
		upper: function(e) {
			this.loadingType='loading'
			setTimeout(()=>{
				this.loadingType='more'
			},500)
		},
		lower: function(e) {
			this.loadingType='noMore'
		},
		scroll: function(e) {
			this.old.scrollTop = e.detail.scrollTop;
		},
		goTop: function(e) {
			this.scrollTop = this.old.scrollTop;
			this.$nextTick(function() {
				this.scrollTop = 0;
			});
			uni.showToast({
				icon: 'none',
				title: '纵向滚动 scrollTop 值已被修改为 0'
			});
		}
	}
};
</script>

<style lang="scss">
page,
.a {
	height: 100%;
}
</style>
